<template>
  <div class="enhanced-breadcrumb">
    <div class="breadcrumb-container">
      <el-icon class="home-icon" @click="goHome">
        <HomeFilled />
      </el-icon>
      
      <template v-for="(item, index) in breadcrumbItems" :key="index">
        <el-icon class="separator"><DArrowRight /></el-icon>
        
        <div 
          class="breadcrumb-item"
          :class="{ 'is-last': index === breadcrumbItems.length - 1 }"
          @click="!item.isLast && navigateTo(item.path)"
          @mouseenter="showPreview(item, $event)"
          @mouseleave="hidePreview"
        >
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
          <el-icon v-if="!item.isLast && item.children" class="expand-icon">
            <ArrowDown />
          </el-icon>
        </div>
      </template>
    </div>

    <!-- 面包屑预览面板 -->
    <transition name="fade-slide">
      <div 
        v-if="previewItem" 
        class="breadcrumb-preview"
        :style="{ left: previewPosition.x + 'px', top: previewPosition.y + 'px' }"
        @mouseenter="keepPreview = true"
        @mouseleave="hidePreview"
      >
        <div class="preview-header">
          <el-icon><component :is="previewItem.icon" /></el-icon>
          <span>{{ previewItem.title }}</span>
        </div>
        
        <div v-if="previewItem.children && previewItem.children.length > 0" class="preview-children">
          <div 
            v-for="child in previewItem.children" 
            :key="child.path"
            class="preview-child"
            @click="navigateTo(child.path)"
          >
            <el-icon><component :is="child.icon" /></el-icon>
            <span>{{ child.title }}</span>
            <el-tag v-if="child.badge" :type="child.badgeType" size="small">
              {{ child.badge }}
            </el-tag>
          </div>
        </div>

        <div v-if="previewItem.description" class="preview-desc">
          {{ previewItem.description }}
        </div>

        <div class="preview-actions">
          <el-button size="small" type="primary" @click="navigateTo(previewItem.path)">
            <el-icon><Position /></el-icon>
            前往
          </el-button>
          <el-button size="small" @click="addToFavorites(previewItem)">
            <el-icon><Star /></el-icon>
            收藏
          </el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  HomeFilled, DArrowRight, ArrowDown, Position, Star
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 面包屑数据
const breadcrumbItems = computed(() => {
  const paths = route.path.split('/').filter(Boolean)
  const items = []
  
  let currentPath = ''
  paths.forEach((path, index) => {
    currentPath += '/' + path
    
    // 这里应该从菜单配置中获取标题，简化处理
    const title = route.matched[index + 1]?.meta?.title || path
    const icon = route.matched[index + 1]?.meta?.icon || 'Document'
    
    items.push({
      path: currentPath,
      title,
      icon,
      isLast: index === paths.length - 1,
      children: [] // 这里可以从菜单配置中获取子菜单
    })
  })
  
  return items
})

// 预览相关
const previewItem = ref(null)
const previewPosition = reactive({ x: 0, y: 0 })
const keepPreview = ref(false)
let previewTimer = null

// 显示预览
const showPreview = (item, event) => {
  if (item.isLast) return
  
  clearTimeout(previewTimer)
  previewTimer = setTimeout(() => {
    const rect = event.target.getBoundingClientRect()
    previewPosition.x = rect.left
    previewPosition.y = rect.bottom + 10
    previewItem.value = {
      ...item,
      description: '点击可快速跳转到此页面',
      children: [
        { path: item.path + '/sub1', title: '子功能1', icon: 'Document', badge: 'HOT', badgeType: 'danger' },
        { path: item.path + '/sub2', title: '子功能2', icon: 'Edit' },
        { path: item.path + '/sub3', title: '子功能3', icon: 'View' }
      ]
    }
  }, 500)
}

// 隐藏预览
const hidePreview = () => {
  clearTimeout(previewTimer)
  setTimeout(() => {
    if (!keepPreview.value) {
      previewItem.value = null
    }
    keepPreview.value = false
  }, 200)
}

// 导航
const navigateTo = (path) => {
  router.push(path)
  previewItem.value = null
}

// 回首页
const goHome = () => {
  router.push('/dashboard')
}

// 添加收藏
const addToFavorites = (item) => {
  ElMessage.success(`已收藏：${item.title}`)
  previewItem.value = null
}
</script>

<style scoped>
.enhanced-breadcrumb {
  position: relative;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.home-icon {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s;
}

.home-icon:hover {
  transform: scale(1.2);
  color: #66b1ff;
}

.separator {
  font-size: 12px;
  color: #c0c4cc;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.breadcrumb-item:not(.is-last):hover {
  background: #ecf5ff;
  color: #409eff;
}

.breadcrumb-item.is-last {
  color: #303133;
  font-weight: 600;
  cursor: default;
}

.expand-icon {
  font-size: 12px;
  color: #c0c4cc;
}

/* 预览面板 */
.breadcrumb-preview {
  position: fixed;
  min-width: 250px;
  max-width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 3000;
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  color: #303133;
}

.preview-children {
  padding: 8px;
}

.preview-child {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  color: #606266;
}

.preview-child:hover {
  background: #ecf5ff;
  color: #409eff;
}

.preview-child span {
  flex: 1;
}

.preview-desc {
  padding: 12px 16px;
  font-size: 13px;
  color: #909399;
  border-top: 1px solid #e4e7ed;
}

.preview-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #e4e7ed;
}

/* 淡入滑动动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

